<template>
  <div class='exam-dialog'>
    <el-dialog title="设备信息" top="10px" class="m_dialog" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <CustomTitle title="基础信息"></CustomTitle>
      <BaseDescriptions :descConfig="descConfig" :descModel="descModel" :descConfigItem="descConfigItem"></BaseDescriptions>
      <CustomTitle title="设备问题"></CustomTitle>
      <BaseDescriptions :descConfig="descConfig" :descModel="descModel" :descConfigItem="deviceDescConfigItem">
        <template #deviceProblemType>
          <dict-tag :options="problemType" :value="descModel.deviceRepairProblemType" />
        </template>
      </BaseDescriptions>
      <CustomTitle title="问题图片"></CustomTitle>
      <!-- <BaseDescriptions :descConfig="descConfig" :descModel="descModel" :descConfigItem="descConfigItem"></BaseDescriptions> -->
      <div class="question-img-wrapper flex flex-wrap gap-15 paddinglr-15">
        <div class="img-box" v-for="item in questionImgList" :key="item.src">
          <BaseCard>
            <template #content>
              <el-image class="both-100" :src="item.src" lazy></el-image>
            </template>
          </BaseCard>
        </div>
      </div>
      <div class="img-wrapper flex margint-15"></div>
      <CustomTitle title="处理结果"></CustomTitle>
      <div class="repair-from" v-if="resultState === '0'">
        <CustomForm ref="form" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules" label-width="80px" label-position="left" />
      </div>
      <div class="repair-desc" v-else>
        <BaseDescriptions :descConfig="descConfig" :descModel="formModel" :descConfigItem="resultDescConfigItem">
          <template #handleWay>
            <dict-tag :options="dict.type.problem_handle_type" :value="formModel.handleWay" />
          </template>
        </BaseDescriptions>
        <div class="question-img-wrapper flex flex-wrap gap-15 paddinglr-15">
          <div class="img-box" v-for="item in repairImgList" :key="item.src">
            <BaseCard>
              <template #content>
                <el-image class="both-100" :src="item.src" lazy></el-image>
              </template>
            </BaseCard>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn_cancel">取 消</el-button>
        <el-button class="btn_ghost__primary" v-if="resultState  === '0' && formModel.handleWay !== '2'" @click="handleRepair('1')">维修完成</el-button>
        <el-button class="btn_ghost__danger" v-if="resultState === '0' && formModel.handleWay === '2'" @click="handleRepair('2')">终 止</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { updateDeviceRepair } from '../api/suppliner'
import { mapState } from 'vuex'

export default {
  dicts: ['problem_handle_type'],
  data () {
    return {
      dialogVisible: false,
      // 描述配置
      descConfig: {
        size: 'medium',
        column: '2',
      },
      // 详情页数据
      descModel: {},
      // 详情页配置项
      descConfigItem: [
        {
          fieIdName: 'deviceName',
          label: '设备名称',
          span: '2'
        },
        {
          fieIdName: 'deviceTypeName',
          label: '设备型号',
          span: '2'
        },
        {
          fieIdName: 'deviceModel',
          label: '设备编码',
          span: '2'
        },
        {
          fieIdName: 'deviceTypeName',
          label: '设备类型',
          span: '2'
        },
        {
          fieIdName: 'deviceBrandName',
          label: '设备品牌',
          span: '2'
        },
        {
          fieIdName: 'deviceBrandContacts',
          label: '联系人',
          span: '2'
        },
        {
          fieIdName: 'deptName',
          label: '所属项目',
          span: '2'
        }
      ],
      deviceDescConfigItem: [
        {
          fieIdName: 'deviceRepairProblemType',
          label: '设备问题',
          span: '2',
          slotName: 'deviceProblemType'
        },
        {
          fieIdName: 'repairStartTime',
          label: '报修时间',
          span: '2'
        },
        {
          fieIdName: 'remark',
          label: '问题补充',
          span: '2'
        },
      ],
      resultDescConfigItem: [
        {
          fieIdName: 'repairFinishTime',
          label: '维修时间',
          span: '2'
        },
        {
          fieIdName: 'handleWay',
          label: '处理方式',
          span: '2',
          slotName: 'handleWay'
        },
        {
          fieIdName: 'remark',
          label: '备注',
          span: '2'
        },
      ],
      // 问题类型
      problemType: [],
      // 修理类型
      repairType: [],
      // 问题图片列表
      questionImgList: [],
      // 处理结果图片列表
      repairImgList: [],
      // 处理状态
      resultState: '0',
      // 处理方式
      // 提交表单数据
      formModel: {
        // 维修时间
        repairFinishTime: "",
        // 处理方式
        handleWay: "",
        // 备注
        remark: "",
        // 维修图片数组
        repairPics: [],
        // 维修id
        deviceRepairId: "",
      },
      // 表单配置项
      formItemConfig: [
        {
          label: "维修时间",
          prop: "repairFinishTime",
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          span: 12,
          component: 'el-date-picker',
          type: 'datetime',
          clearable: false,
        },
        {
          label: "处理方式",
          prop: "handleWay",
          span: 12,
          component: "BaseSelect",
          onChange: (e) => {
            // this.formModel.mapCode = e
          }
        },
        {
          label: "备注",
          prop: "remark",
          span: 12,
        },
        {
          label: "问题图片",
          prop: "repairPics",
          span: 24,
          component: "BaseUpload",
          multiple: true,
          clearable: true,
          onChange: (val, e) => {
            console.log("问题图片", val, e)
            let pic = val?.response?.data?.url || ''
            if (pic) {
              this.formModel.repairPics.push(pic)
            }
          },
        },
      ],
      // 表单验证
      formRules: {
        handleWay: {
          required: true,
          message: "处理方式不能为空",
          trigger: "change",
        },
        repairPics: {
          required: true,
          message: "维修图片不能为空",
          trigger: "blur",
        },
      },

    };
  },
  computed: {
    ...mapState('config', ['inFilePrefix']),
  },
  watch: {},
  methods: {
    // show 方法
    show (basic, data, problemType, repairType) {
      this.dialogVisible = true
      this.initHandleWay()
      if (data !== undefined) {
        this.$nextTick(() => {
          this.descModel = JSON.parse(JSON.stringify(basic))
          if(data.repairPics === null) {
            data.repairPics = []
          }
          this.formModel = JSON.parse(JSON.stringify(data))
          // 处理图片
          this.processImgList('question', data.problemPics)
          this.processImgList('repair', data.repairPics)
          // 处理类型
          this.problemType = problemType
          this.repairType = repairType
          // 任务状态
          this.$set(this, 'resultState', data.status)
          // 设备报修ID
        })
      }
      if (this.resultState === '0') {
        this.resetForm()
      }
    },
    // 处理图片列表
    processImgList (dataKey, data) {
      try {
        if (data) {
          this[`${dataKey}ImgList`] = this.initImgList(data)
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 清空formData 
    resetForm () {
      this.formData = {
        // 维修时间
        repairFinishTime: "",
        // 处理方式
        handleWay: "",
        // 备注
        remark: "",
        // 维修图片数组
        repairPics: [],
        // 维修id
        deviceRepairId: "",
      }
      this.$nextTick(() => {
        this.$refs.form.toResetFields()
      })
    },
    // 处理图片列表
    initImgList (list) {
      let imgList = []
      list.forEach(item => {
        imgList.push({
          src: this.inFilePrefix + item
        })
      })
      return imgList
    },
    // 初始化处理方式
    initHandleWay () {
      this.formItemConfig.forEach(item => {
        if (item.prop === 'handleWay') {
          item.options = this.dict.type.problem_handle_type
        }
      })
    },
    // 维修处理按钮
    async handleRepair (type) {
      const status = type
      const params = {
        ...this.formModel,
        status: status
      }
      const response = await updateDeviceRepair(params)
      if (response.code === 200) {
        this.$message({
          type: 'success',
          message: '处理完成'
        })
        this.dialogVisible = false
        this.$emit('replace')
      }
    }
  }
}
</script>

<style lang='less' scoped>
</style>